<template>
  <div class="news_styl">
    <img class="img_styl" src="@/assets/images/news_img.png" alt="" srcset="" />
    <div class="news_content">
      <div class="listContent">
        <div class="list_content_left" v-if="MX_DataList && MX_DataList.length">
          <div class="news_item" @click="clickNewsFun(item)" v-for="(item, index) in MX_DataList" :key="index">
            <div class="item_left">
              <img class="img_styl1" :src="imagePreviewUrl + item.img[0]" alt="" srcset="" />
            </div>
            <div class="item_right">
              <div class="item_info">
                <div class="news_title">
                  {{ item.title }}
                </div>
                <div class="news_desc">
                  <Ellipsis text="2023年6月18日，我公司生产制造的首批容器产品成功下线，标志着我公司对容器产品的生产，正式进入规模化商业推广应用阶段。" :lines="2" tooltip />
                </div>
              </div>
              <div class="info_bottom">
                <div class="btn_look">
                  查看详情
                  <Icons font="#icon-xwjt" class="icon-xwjt" fontSize="16px"></Icons>
                </div>
                <div class="news_time">
                  <Icons font="#icon-sj" class="icon-sj" fontSize="16px"></Icons>
                  发布时间：{{ item.createTime }}
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="nullData_styl" v-else>
          <QdNoData ref="QdNoData"></QdNoData>
        </div>
        <div class="page_styl" v-if="MX_DataList && MX_DataList.length">
          <Page :page-size="MX_pageSize" :total="MX_total" show-total />
        </div>
        <Spin size="large" fix v-if="MX_tableLoading"></Spin>
      </div>

      <QdNotice ref="QdNotice"></QdNotice>
    </div>
  </div>
</template>

<script>
import QdNotice from "@/components/common/Qd-Notice.vue";
import listMixins from "@/mixins/listMixins";
import localData from "../../../localData";
import QdNoData from "@/components/common/Qd-NoData.vue";

export default {
  components: { QdNotice, QdNoData },
  mixins: [listMixins],
  data() {
    return {
      companyList: [
        {
          id: "0",
          name: "中和宇通（山东）石油化工有限公司"
        },
        {
          id: "1",
          name: "12中和宇通（山东）石油化工有限公司"
        },
        {
          id: "2",
          name: "22中和宇通（山东）石油化工有限公司"
        },
        {
          id: "3",
          name: "333中和宇通（山东）石油化工有限公司"
        },
        {
          id: "4",
          name: "44422中和宇通（山东）石油化工有限公司"
        },
        {
          id: "5",
          name: "55522中和宇通（山东）石油化工有限公司"
        },
        {
          id: "6",
          name: "66655522中和宇通（山东）石油化工有限公司"
        },
        {
          id: "7",
          name: "757775522中和宇通（山东）石油化工有限公司"
        }
      ],
      MX_apis: {
        getlist: "API_articleList"
      },
      imagePreviewUrl: localData.API_URl + "/guns" // 图片预览地址
    };
  },
  mounted() {
    this.MX_getData();
  },
  methods: {
    clickNewsFun(item) {
      this.$router.push({
        path: "/news/news-detail",
        query: {
          id: item.id
        }
      });
    },
    getNewsList() {}
  }
};
</script>
<style lang="less" scoped>
@import "~@/assets/styles/main.less";
@deep: ~">>>";

.news_styl {
  width: 100%;
  min-height: 500px;
  padding-bottom: 150px;
  background-color: #f3f3f3;

  .img_styl {
    width: 100%;
  }

  .news_content {
    .flex-x(space-between, flex-start);
    width: 1185px;
    margin: 20px auto;
    gap: 20px;

    .listContent {
      flex-grow: 1;
      min-height: 662px;
      .flex-y(space-between, flex-start);
      position: relative;

      .list_content_left {
        .news_item {
          .flex-x(flex-start);
          gap: 40px;
          width: 858px;
          padding: 16px 10px 30px 10px;
          margin-bottom: 14px;
          background-color: #ffffff;
          cursor: pointer;
          transition: all 0.2s ease;
          &:hover {
            transform: translateY(-5px);
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
          }

          .item_left {
            width: 290px;
            height: 144px;

            img {
              width: 290px;
              height: 144px;
            }
          }

          .item_right {
            .flex-y(space-between, flex-start);
            height: 144px;
            text-align: left;
            color: #9e9e9e;

            .item_info {
              .news_title {
                margin-bottom: 10px;
                font-size: 16px;
                color: #333333;
              }
            }

            .info_bottom {
              .flex-x();
              width: 100%;

              .btn_look {
                .flex-x(flex-start);
                font-size: 14px;
                color: @themeColor;

                .icon-xwjt {
                  margin: 8px 0 0 4px;
                }
              }

              .news_time {
                .flex-x(flex-start);
                font-size: 12px;
                color: #9e9e9e;

                .icon-sj {
                  margin-right: 4px;
                }
              }
            }
          }

          .item_right:hover {
            color: @themeColor !important;
          }
        }
      }

      .page_styl {
        width: 858px;
        text-align: right;
      }

      .nullData_styl {
        width: 100%;
        height: 100%;
        flex-grow: 1;
        .flex-y(center, center);
        background: white;
      }
    }
  }
}
</style>
